<template>
  <u-popup @close="close" class="popup" :popup="false" v-model="value" mode="bottom" :safe-area-inset-bottom="true" :z-index="uZIndex" :closeable="true">
    <u-tabs v-if="value" @change="tabsChange" ref="tabs" :is-scroll="true" :list="genTabsList" :current="tabsIndex" active-color="#389bf2"></u-tabs>
    <view class="area-box">
      <view :class="{ 'change':isChange }" class="u-flex">
        <view class="area-item">
          <view class="u-padding-10 u-bg-gray" style="height: 100%;">
            <scroll-view :scroll-y="true" style="height: 100%">
              <u-cell-group>
                <u-cell-item @click="oneChange" v-for="(item,index) in oneLists" :key="index" :title="item.label" :arrow="false" :index="index">
                  <u-icon v-if="isChooseO && one === index" slot="right-icon" name="checkbox-mark" size="34"></u-icon>
                </u-cell-item>
              </u-cell-group>
            </scroll-view>
          </view>
        </view>
        <view class="area-item">
          <view class="u-padding-10 u-bg-gray" style="height: 100%;">
            <scroll-view :scroll-y="true" style="height: 100%">
              <u-cell-group v-if="isChooseO">
                <u-cell-item @click="twoChange" v-for="(item,index) in twoList" :key="index" :title="item.label" :arrow="false" :index="index">
                  <u-icon v-if="isChooseT && two === index" slot="right-icon" name="checkbox-mark" size="34"></u-icon>
                </u-cell-item>
              </u-cell-group>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup-btn u-flex">
      <view @click="close" v-if="cancelBtnShow" class="btn">取消</view>
      <view @click="reset" v-else class="btn">重置</view>
      <view @click="confirm" class="btn">确认</view>
    </view>
  </u-popup>
</template>

<script>
export default {
  name: "com-business",
  props: {
    // 专业1 / 行业2
    type: {
      type: [String, Number],
      default: 1,
    },
    // 通过双向绑定控制组件的弹出与收起
    value: {
      type: Boolean,
      default: false,
    },
    // 弹出的z-index值
    zIndex: {
      type: [String, Number],
      default: 0,
    },
    // 取消按钮
    cancelBtnShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      tabsIndex: 0, // 选项卡
      isChooseO: false, //是否已经选择了一级
      one: -1, //一级下标
      oneLists: [], // 一级列表
      isChooseT: false, //是否已经选择了二级
      two: -1, //二级下标
      twoLists: [], // 二级列表
      twoList: [], // 二级列表
    };
  },
  mounted() {
    if (this.type == 1) {
      this.getMajorList();
    } else {
      this.getIndustryList();
    }
  },
  computed: {
    isChange() {
      return this.tabsIndex > 1;
    },
    genTabsList() {
      let tabsList = [{ name: "请选择" }];
      if (this.isChooseO) {
        tabsList[0]["name"] = this.oneLists[this.one]["label"];
        tabsList[1] = { name: "请选择" };
      }
      if (this.isChooseT) {
        tabsList[1]["name"] = this.twoList[this.two]["label"];
      }
      return tabsList;
    },
    uZIndex() {
      // 如果用户有传递z-index值，优先使用
      return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
    },
  },
  watch: {
    type(newVal) {
      if (newVal == 1) {
        this.getMajorList();
      } else {
        this.getIndustryList();
      }
    },
  },
  methods: {
    // 专业
    getMajorList() {
      this.$api.dropDown.getMajorList().then((res) => {
        // console.log(res);
        let data = res;
        let oneArray = [],
          twoArray = [];
        data.forEach((item, index) => {
          let oneObj = { label: item.title, value: item.id };
          oneArray.push(oneObj);
          let array = [];
          (item.children || []).forEach((ele) => {
            let twoObj = { label: ele.title, value: ele.id };
            array.push(twoObj);
          });
          twoArray.push(array);
        });
        this.oneLists = oneArray;
        this.twoLists = twoArray;
      });
    },
    // 行业
    getIndustryList() {
      this.$api.dropDown.getIndustryList().then((res) => {
        // console.log(res);
        let data = res;
        let oneArray = [],
          twoArray = [];
        data.forEach((item) => {
          let oneObj = { label: item.title, value: item.id };
          oneArray.push(oneObj);
          let array = [];
          item.children.forEach((ele) => {
            let twoObj = { label: ele.title, value: ele.id };
            array.push(twoObj);
          });
          twoArray.push(array);
        });
        this.oneLists = oneArray;
        this.twoLists = twoArray;
      });
    },
    // 选项卡
    tabsChange(index) {
      this.tabsIndex = index;
    },
    // 一级选择
    oneChange(index) {
      this.isChooseO = true;
      this.isChooseT = false;
      this.one = index;
      this.twoList = this.twoLists[index];
      this.tabsIndex = 1;
      this.two = -1;
    },
    // 二级选择
    twoChange(index) {
      this.isChooseT = true;
      this.two = index;
    },
    // 确认选择
    confirm() {
      let result = {};
      result.one = this.oneLists[this.one] || "";
      result.two = this.twoList[this.two] || "";
      this.$emit("business-change", result);
      this.close();
    },
    // 重置
    reset() {
      this.$emit("business-reset");
      this.close();
    },
    // 关闭
    close() {
      this.$emit("input", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.area-box {
  width: 100%;
  overflow: hidden;
  height: 800rpx;

  > view {
    width: 150%;
    transition: transform 0.3s ease-in-out 0s;
    transform: translateX(0);

    &.change {
      transform: translateX(calc(-100% / 3));
    }
  }

  .area-item {
    width: calc(100% / 3);
    height: 800rpx;
  }
}

.popup {
  &-btn {
    width: 100%;
    background-color: $uni-bg-color;
    border-top: 1px solid $uni-bg-color-grey;

    .btn {
      flex: 1;
      line-height: 100rpx;
      text-align: center;

      &:nth-child(n + 2) {
        border-left: 1px solid $uni-bg-color-grey;
      }
    }
  }
}
</style>
